<template>
  <view class="detail">
    <view class="detail-info">
      <image class="thumb" :src="detail.coverUrl" mode="aspectFit"></image>
      <div class="info">
        <view class="title">{{ detail.productName }}</view>

        <view class="info-datas">
          <view class="stock">
            <text class="num">{{ detail.price }}</text>
            积分
          </view>
          <div class="stock">
            <div class="stock-right">库存:{{ detail.stock }}</div>
          </div>
        </view>
      </div>
      <view class="view-detail" v-if="detail.memo">
        <div class="label">商品详情</div>
        <view class="info-detail"><rich-text :nodes="detail.memo | formatRichText"></rich-text></view>
      </view>
      <div class="bottom">
        <div class="bottom-box">
          <view class="bottom-box-tool">
            <div class="icon icon-shop_home" @click="handelToTab">
              <image class="img" src="@/pagesA/static/icon-shop_home@2x.png" mode="aspectFit"></image>
              <div class="text">首页</div>
            </div>
            <div class="icon icon-shop_call" @click="handelToCall()">
              <image class="img" src="@/pagesA/static/icon-shop_call@2x.png" mode="aspectFit"></image>
              <div class="text">客服</div>
            </div>
          </view>
          <div v-if="detail.stock > 0" class="btn" @click="handleCreditOrder(detail.price)">立即兑换</div>
          <div v-else class="btn no">立即兑换</div>
        </div>
      </div>
    </view>
  </view>
</template>

<script>
import { shopDetail, productGetCreditDetail, creditOrderCreate } from '@/api/shop.js';

export default {
  data() {
    return {
      productId: null,
      detail: {},
      comDetail: {}
    };
  },
  onLoad(opt) {
    this.productId = opt.id;
    this.getProductGetCreditDetail();
    this.getShopDetail();
  },

  filters: {
    /**
     * 处理富文本里的图片宽度自适应
     * 1.去掉img标签里的style、width、height属性
     * 2.img标签添加style属性：max-width:100%;height:auto
     * 3.修改所有style里的width属性为max-width:100%
     * 4.去掉<br/>标签
     * @param html
     * @returns {void|string|*}
     */
    formatRichText(html) {
      if (!html) return;
      //控制小程序中图片大小
      let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
        return match;
      });
      newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
        return match;
      });
      newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
      return newContent;
    }
  },
  methods: {
    getProductGetCreditDetail() {
      const data = {
        productId: this.productId
      };
      productGetCreditDetail(data).then(res => {
        this.detail = res.data;
      });
    },
    getShopDetail() {
      shopDetail().then(res => {
        this.comDetail = res.data;
      });
    },
    handelToCall() {
      uni.makePhoneCall({
        phoneNumber: this.comDetail.shopTel
      });
    },
    handelToTab() {
      this.$tab.switchTab('/pages/shop/index');
    },
    handleCreditOrder(num) {
      uni.showModal({
        title: '兑换商品',
        content: `确定消费${num}积分兑换此商品`,
        showCancel: true,
        cancelText: '取消',
        confirmText: '确定',
        cancelColor: '#000000',
        confirmColor: '#1E60FF',
        success: res => {
          if (res.confirm) {
            console.log('用户点击确认');
            this.fetchCreditOrderCreate();
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
        fail: () => {
          uni.showToast({
            title: '兑换失败',
            icon: 'none'
          });
        }
      });
    },
    fetchCreditOrderCreate() {
      const data = {
        productId: this.detail.id
      };
      creditOrderCreate(data).then(res => {
        uni.showToast({
          title: '兑换成功',
          icon: 'success'
        });
        setTimeout(() => {
          this.$tab.navigateTo('/pagesA/exchange/index');
        }, 1000);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.detail {
  background-color: #f8f8f8;

  &-info {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .thumb {
    display: block;
    width: 750rpx;
    height: 750rpx;
  }

  .info {
    background-color: #fff;
    margin-bottom: 16rpx;
    overflow: hidden;

    .title {
      padding: 24rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
      line-height: 1;
    }

    .info-datas {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .stock {
        margin-bottom: 32rpx;
        margin: 0 24rpx 32rpx 24rpx;
        font-size: 28rpx;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #ff4b44;
        line-height: 1;

        .num {
          font-size: 56rpx;
          line-height: 1;
        }
      }

      .stock-right {
        font-size: 29rpx;
        font-weight: 400;
        color: #111;
      }
    }
  }

  .view-detail {
    padding-bottom: 122rpx;
    background-color: #fff;
    overflow: hidden;

    .label {
      margin: 24rpx;
      height: 40rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #111111;
    }

    .info-detail {
      padding-top: 24rpx;
      border-top: 1px solid rgba(248, 248, 248, 1);
    }

    img {
      max-width: 100%;
    }
  }

  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    background: #ffffff;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    &-box {
      padding: 20rpx 24rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-tool {
        display: flex;
        align-items: center;

        .icon {
          .img {
            width: 44rpx;
            height: 44rpx;
            margin-bottom: 4rpx;
          }

          &.icon-shop_home {
            margin-left: 26rpx;
          }

          &.icon-shop_call {
            margin-left: 76rpx;
          }

          .text {
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #545454;
          }
        }
      }

      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        width: 462rpx;
        height: 80rpx;
        background: linear-gradient(90deg, #00e4ff 0%, #1e60ff 100%);
        border-radius: 40rpx;

        &.no {
          background: linear-gradient(90deg, #cfcfcf 0%, #cfcfcf 100%);
          box-shadow: inset 0rpx 4rpx 12rpx 0rpx #cfcfcf, inset -4rpx -4rpx 16rpx 0rpx rgba(184, 184, 184, 0.5);
        }
      }
    }
  }
}
</style>
